<template>
    <div class="chart-container">
      <div ref="chart" :style="{ width: width, height: height }"></div>
    </div>
  </template>
  
  <script>
  import echarts from 'echarts/lib/echarts'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/component/title'
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/grid'
  import 'echarts/lib/component/legend'

  
  export default {
    props: {
      // 图表数据（格式：[{ label: '类别', value: 100 }, ...]）
      chartData: {
        type: Array,
        required: true,
        default: () => []
      },
      // 图表配置
      options: {
        type: Object,
        default: () => ({})
      },
      // 图表尺寸
      width: {
        type: String,
        default: '900px'
      },
      height: {
        type: String,
        default: '400px'
      },
      // 数据字段映射
      xKey: {
        type: String,
        default: 'label'
      },
      yKey: {
        type: String,
        default: 'value'
      }
    },
  
    data() {
      return {
        chartInstance: null
      }
    },
  
    watch: {
      chartData: {
        handler(newVal) {
          this.updateChart(newVal)
        },
        deep: true
      }
    },
  
    mounted() {
      this.initChart()
      window.addEventListener('resize', this.handleResize)
    },
  
    beforeDestroy() {
      window.removeEventListener('resize', this.handleResize)
      if (this.chartInstance) {
        this.chartInstance.dispose()
      }
    },
  
    methods: {
      initChart() {
        this.chartInstance = echarts.init(this.$refs.chart)
        const defaultOption = this.getDefaultOption()
        const mergedOption = { ...defaultOption, ...this.options }
        this.chartInstance.setOption(mergedOption)
      },
  
      getDefaultOption() {
        return {
          title: {
            text: '柱状图',
            left: 'center',
            textStyle: {
              fontSize: 16
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            data: this.chartData.map(item => item[this.xKey])
          },
          yAxis: {
            type: 'value',
            name: '数值'
          },
          series: [{
            name: '数据',
            type: 'bar',
            data: this.chartData.map(item => item[this.yKey]),
            itemStyle: {
              color: '#5470c6'
            },
            barWidth: '40%',
            label: {
              show: true,
              position: 'top'
            }
          },
        ],
          grid: {
            containLabel: true,
            left: '10%',
            right: '10%',
            bottom: '20%'
          }
        }
      },
  
      updateChart(data) {
        const newOption = {
          xAxis: {
            data: data.map(item => item[this.xKey])
          },
          series: [{
            data: data.map(item => item[this.yKey])
          }]
        }
        this.chartInstance.setOption(newOption)
      },
  
      handleResize() {
        this.chartInstance && this.chartInstance.resize()
      }
    }
  }
  </script>
  
  <style scoped>
  .chart-container {
    position: relative;
  }
  </style>